<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../static/css/common.css">
		<link rel="stylesheet" href="css/workTable.css" />

		<style>
			*{
				touch-action: none;
			}
			html,
			body {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">工作台</h1>
		</header>
		
		<div class="mui-content" id="content" v-cloak>
			<div class="top">
					<div class="search-model" >
						<div class="mui-input-row mui-search">
							<input type="search" class="mui-input-clear" style="background-color: #fff;" placeholder="请输入任务描述等">
						</div>
					</div>
					<div class="top-textall">全部</div>
			</div>
			<div id="scroll">
				<div class="list" id="list">
					<!-- <div style="height: 1px;padding:0;background-color: #efeff4;"></div> -->
					<div v-for="(item,index) in list" :key="index">
							<div class="item_left">
								<div class="text_row">
									<div class="label">审批内容:</div>
									<div class="content" @click="navTo('workDetail.html')">{{item.content}}</div>

								</div>
								<div class="text_row" style="margin-top: 10px;">
									<div class="label">操作人:</div>
									<div  class="content1">{{item.user}}</div>
								</div>
							</div>
							<div class="item_right">
								<div >
									<span v-if="item.status == 1" style="font-size: 3.5vw;color: #999;">进入详情驳回</span>
								</div>	
								<div class="submit_btn" style="padding: 0 4vw;" @click="showPop">同意</div>
								
							</div>
					</div>
				</div>
			</div>
				<!-- 弹出层 -->
		<div class="popup" v-if="show_popup" @click="hidePopup">
			<div class="pop_box" @click.stop="clickStop">
				<div class="">
					<span>审核结果</span>
					<span class="scuess_txt">通过</span>
				</div>
				<div style="margin: 15px 0;">审核意见</div>
				<div style="position: relative;">
					<textarea name="" id="" v-model="advance">
					</textarea>
					<div class="area_num">已输入{{advance.length}}字/200字</div>
				</div>
				<div class="flex_row mt-10">
					<div class="flex_row">
						<div style="font-size: 3.5vw;">审批人</div>
						<input class="pop_ipt" />
					</div>
					<div style="color:#efab00;font-size: 13px;margin-left: 5px;">备注: 需下一步或转办时显示</div>
				</div>
			</div>
		</div>
		</div>

		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
		
		<script type="text/javascript" charset="utf-8">
		projectVM = new Vue({
			el: "#content",
			data: {
				advance:'',
				show_popup:false,
				list:[{content:'XXX信用XXXX钥匙',status:1,user:'[IP123456]张三2021-6-20'},
				{content:'XXX信用XXXX钥匙',status:2,user:'[IP123456]张三2021-6-20'},
				{content:'XXX信用XXXX钥匙',status:3,user:'[IP123456]张三2021-6-20'}
			]
			},
			created: function() {},
			methods: {
				clickStop(){},
				showPop(){
					this.show_popup = true
				},
				hidePopup(){
				this.show_popup = false	
				},
			navTo(e){
				mui.openWindow({
            			url: e,
            			id: e,
        		});
				}
				},
			
			})
			var page = 0
			mui.init({
      pullRefresh: {
        container: "#scroll", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: { //下拉刷新
		  style: 'circle',
          height: 50, //可选,默认50.触发下拉刷新拖动距离,
          auto: false, //可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            page = 0;
            
            ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
		mui('#scroll').pullRefresh().endPulldownToRefresh();
			mui('#scroll').pullRefresh().enablePullupToRefresh();
          mui('#scroll').pullRefresh().endPullupToRefresh(true); 
             }
        },
        up: { //上拉加载
          height: 50, //可选.默认50.触发上拉加载拖动距离
          auto: false, //可选,默认false.自动上拉加载一次
          contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            
          }
        }
      }
    });
	mui('#list').on("tap","div,button",function(e){
		this.click()
	})
		</script>
	</body>

</html>